<script>
import {defineComponent} from 'vue'
import axios from "axios"
import instance from "@/api/axios";

export default defineComponent({
    name: "axiosView",
    data(){
        return{
            imgSrc:'',
            imgList:[],
            courseList:[],
            boutiqueList:[]
        }
    // console.dir()查看结构

    },
    methods:{
        // 这个就是根据自定义的axios的代码来优化不用一遍一遍该请求头了
        getList(type){
          let url = new URLSearchParams()
            url.append('type',type)
            url.append('pageSize',5)
            url.append('pageNum',1)
            return axios.post('http://1.117.81.216:8087/weChat/applet/course/list/type', url)
        }
    },
    created() {
        // 调用配置好的axios的instance函数并设置请求头
        instance.post('http://1.117.81.216:8087/weChat/applet/course/list/type'),{
            type:'free',
            pageSize:5,
            pageNum:1
        }
        instance.post('http://1.117.81.216:8087/weChat/applet/course/list/type'),{
            type:'free',
            pageSize:5,
            pageNum:1
        },{heard:'multipart/form-data'}
        // 获取的免费课程
        this.getList('free').then(res=>{
            if (res.data.code ===0){
                this.courseList = res.data.rows
            }
        })
    //     精品课程
        this.getList('boutique').then(res => {
            if (res.data.code === 0) {
                this.boutiqueList = res.data.rows
            }
        })
    //     接口请求写接口的
        axios.get("http://1.117.81.216:8087/weChat/applet/course/banner/list?number=1")
            .then( res=>{
                console.log(res);
                if (res.data.code ===0){
                    this.imgSrc = res.data.data[0].imgUrl;
                    this.imgList = res.data.data;
                }

            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });

    },


})
</script>

<template>
<div>
<!--    把第一张的src的值付给一个变量并使用-->
  <img :src="imgSrc" alt="">
<!--    <img :src="item.imgUrlPc" alt="" v-for="(item) in imgList" :key="item.id">-->
  <div :style="`background-image: url(${item.imgUrlPc})`" v-for="(item) in imgList" :key="item.id"></div>


    <div class="container">
        <div class="course" v-for="(item) in courseList" :key="item.courseId">
            <img :src="item.coverFileUrl" alt="">
            <div>{{ item.courseTitle }}</div>
            <div>共有{{ item.learningNum }}人学习</div>
            <div>免费</div>
        </div>
    </div>
    <div class="container">
        <div class="course" v-for="(item) in boutiqueList" :key="item.courseId">
            <img :src="item.coverFileUrl" alt="">
            <div>{{ item.courseTitle }}</div>
            <div>共有{{ item.learningNum }}人学习</div>
            <div v-if="item.isFree==='1'">免费</div>
            <div v-else-if="item.isDiscount==='1'">{{ item.discountPrice }}
                <del>{{ item.coursePrice }}</del>
            </div>
            <div v-else>{{ item.coursePrice }}</div>
        </div>
    </div>
</div>
</template>

<style scoped lang="less">
.container{
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  .course{
    width: 19%;
    img{
      width: 100%;
    }
  }
}
</style>